<template>
    <div class="warpper">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
  </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    data () {
        return{
            swiperOption: {
                pagination:'.swiper-pagination',
                loop: true,
            },
            swiperList: [{
                id: '0001',
                imgUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/b2025faa00695d43b0e0b8088cdfe3d6.jpg_890x330_28b926cb.jpg'
            },
            {
                id: '0002',
                imgUrl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/e60ff66031767ceb2c3f6fe47206a439.jpg_890x330_2b77c960.jpg'
            }],
        };
    },
};
</script>

<style scoped>
    .swiper-img{
        width: 100%;
    };
    .wrapper{
        background-color: #eee;
    };
</style>
